<template>
	<page-meta root-font-size="14px"></page-meta>

	<scroll-view class="root" :scroll-y="true" @scroll="handlePostsScroll">
		<view class="scroll">

			<view class="user-view">
				<image class="avatar" :src="userInfo.avatarurl" @click="gotoUrl('/pages/person_msg/person_msg')">
				</image>
				<view style="display: flex; align-items: flex-end;">
					<text class="username">{{ userInfo.nickname }}</text>
					<u-icon size="1.8rem" name="edit-pen" @click="gotoUrl('/pages/person_msg/person_msg')"></u-icon>
				</view>

				<image class="icons" style="top: 0; left: 0;" @click="goBack()"
					src="http://haojiezhe12345.top:8090/miniprogram_static/community/6cc1f92fe769cdf55fbd1e86df48f7ca.png">
				</image>
			</view>

			<posts :type="2" ref="postsRef" editable></posts>

		</view>

		<navigator class="addPostBtn" url="/pages/community/publish">
			<uni-icons type="plusempty" size="32px" color="white"></uni-icons>
		</navigator>

	</scroll-view>

</template>

<script>
	import posts from './posts.vue'

	import {
		getUserInfo,
	} from '@/config/api.js'

	import {
		gotoUrl,
		goBack,
	} from "@/utils.js"

	export default {
		components: {
			posts,
		},
		props: {},
		data() {
			return {
				userInfo: {
					"avatarurl": "https://cdn.xxhzm.cn/images/head/5557153163.jpg",
					"city": "",
					"createTime": "",
					"gender": 0,
					"hobby": "",
					"id": 0,
					"nickname": "nickname",
					"openid": "",
					"points": 0,
					"province": "",
					"userBirthday": "",
					"userPhone": ""
				},
				userInfo: {},

				gotoUrl,
				goBack,
			};
		},
		onLoad() {
			uni.$on('reloadPersonal', this.loadPosts)
		},
		onUnload() {
			uni.$off('reloadPersonal')
		},
		mounted() {
			this.loadUserInfo()
		},
		methods: {
			async loadUserInfo() {
				var res = await getUserInfo()
				this.userInfo = res
			},

			async loadPosts() {
				this.$refs.postsRef.fetchPosts()
			},

			handlePostsScroll(e) {
				uni.createSelectorQuery().in(this).select('.root').boundingClientRect((data) => {
						var toBottom = e.detail.scrollHeight - e.detail.scrollTop - data.height
						if (toBottom < 100) {
							this.$refs.postsRef.fetchNextPagePosts()
						}
					})
					.exec();
			},
		},
	};
</script>

<style scoped lang="css">
	@import url("main.css");

	.root {
		width: 100%;
		height: 100%;
		background-image: url('http://haojiezhe12345.top:8090/miniprogram_static/community/08f1d3d186705a9c9a02fb93d6e23522.png');
		background-size: 100% 100%;
		overflow-y: auto;
	}

	.scroll {
		display: flex;
		flex-flow: column;
		min-height: 100%;
	}

	.user-view {
		position: relative;
		display: flex;
		flex-flow: column;
		align-items: center;
		padding: 2rem 0 1.5rem;
		gap: 0.5rem;
	}

	.user-view .avatar {
		width: 6rem;
		height: 6rem;
		border-radius: 100rem;
	}

	.user-view .username {
		font-size: 1.5rem;

	}

	.user-view .icons {
		position: fixed;
		margin: 0.5rem;
		width: 2.3rem;
		height: 2.3rem;
	}

	posts {
		flex-grow: 1;
		display: flex;
		flex-flow: column;
		padding: 1.2rem 1rem 100px;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 1rem;
	}

	.addPostBtn {
		position: fixed;
		right: 20px;
		bottom: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: 100vw;
		background: linear-gradient(140deg, #ffaa72, #ff6831);
		box-shadow: 0px 1px 4px 0 #888;
	}
</style>